<template>
  <div class="container">
    <div class="cropper">
      <div class="pic-cropper">
        <div class="img-crop">
          <img id="image" :src="imgUrl" alt="Picture">
        </div>
        <div class="operate">
          <input @change="selectPic" type="file" id="pic" style="display:none;" name="pic" accept=".jpg,.jpeg,.png,.gif,.bmp"/>
          <el-button @click="uploadPic" type="primary" style="width: 100px;">上传图片</el-button>
          <el-tooltip content="缩小" placement="bottom">
            <el-button @click="zoom(-0.1)" type="primary" icon="el-icon-zoom-out"></el-button>
          </el-tooltip>
          <el-tooltip content="放大" placement="bottom">
            <el-button @click="zoom(0.1)" type="primary" icon="el-icon-zoom-in"></el-button>
          </el-tooltip>
          <el-tooltip content="逆时针旋转" placement="bottom">
            <el-button @click="rotate(-90)" type="primary" icon="el-icon-refresh"></el-button>
          </el-tooltip>
          <el-tooltip content="顺时针旋转" placement="bottom">
            <el-button @click="rotate(90)" type="primary" icon="el-icon-refresh"></el-button>
          </el-tooltip>
        </div>
      </div>
      <div class="preview">
        <div>
          <div class="img-preview img-100"></div>
          <span class="tips">100px*100px</span>
        </div>
        <div>
          <div class="img-preview img-50"></div>
          <span class="tips">50px*50px</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';

export default {
  name: 'AvatarCropper',
  props: {
    imgUrl: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      options: {
        dragMode: 'move',
        aspectRatio: 1,
        autoCropArea: 0.7,
        viewModel: 3,
        preview: '.img-preview',
        ready: function () {
          document.getElementsByClassName('cropper-view-box')[0].style.borderRadius = '50%';
          document.getElementsByClassName('cropper-face')[0].style.borderRadius = '50%';
        }
      },
      cropper: null,
      uploadImageType: '',
      uploadImageName: ''
    }
  },
  methods: {
    getCroppedCanvas () {
      if (!this.cropper) {
        return;
      }
      let option = {};
      if (this.uploadImageType === 'image/jpeg') {
        option.fillColor = '#fff';
      }

      return this.cropper.getCroppedCanvas(option);
    },
    getFilename () {
      return this.uploadImageName;
    },
    destroy () {
      if (this.cropper) {
        this.cropper.destroy();
      }
    },
    selectPic () {
      let files = document.getElementById('pic').files;
      if (!this.cropper) {
        return;
      }
      if (files && files.length) {
        let file = files[0];
        if (/^image\/\w+$/.test(file.type)) {
          this.uploadImageType = file.type;
          this.uploadImageName = file.name;
          
          let url = URL.createObjectURL(file);
          this.cropper.replace(url);
          document.getElementById('pic').value = ''
        } else {
          this.$message.error('请选择一张图片')
        }
      }
    },
    uploadPic () {
      document.getElementById('pic').click();
    },
    zoom (ratio) {
      if (this.cropper) {
        this.cropper.zoom(ratio);
      }
    },
    rotate (degree) {
      if (this.cropper) {
        this.cropper.rotate(degree);
      }
    },
    extractImgName (src) {
      let defaultExt = '.jpg';
      let defaultName = 'default';
      let res = /(\.(\w+)\?)|(\.(\w+)$)/.exec(src);
      if (res) {
        return defaultName + res[0];
      }
      return defaultName + defaultExt;
    }
  },
  mounted () {
    const img = document.querySelector('#image');
    this.uploadImageName = this.extractImgName(this.imgUrl);
    this.cropper = new Cropper(img, this.options);
  },
  watch: {
    imgUrl (newValue, oldValue) {
      this.cropper.replace(newValue);
      // this.uploadImageName = this.extractImgName(newValue);
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;

  .cropper {
    width: 100%;
    display: flex;
    justify-content: space-around;

    .pic-cropper {
      width: 350px;
      height: 400px;

      .img-crop {
        width: 350px;
        height: 350px;
        border:1px solid #aaa;
        box-shadow: 1px 1px 4px #B0B0B0;
      }

      .operate {
        margin-top: 5px;
      }

    }

    .preview {
      padding: 4px 0;
      width: 200px;
      height: 350px;
      border: 1px solid #ddd;
      box-shadow: 0px 0px 4px #7E7E7E;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;

      .img-preview {
        border-radius: 50%;
        display: block;
        overflow: hidden;
        box-shadow: 0px 0px 4px #7E7E7E;
      }

      .img-100 {
        width: 100px;
        height: 100px;
      }

      .img-50 {
        width: 50px;
        height: 50px;
      }

      .tips {
        display: block;
        width: 100%;
        text-align: center;
        color: #bbb;
        font-size: 12px;
      }
    }
  }
}
</style>
